<script setup>
import { reactive } from 'vue';

const form = reactive({
  name: '',
  post: '',
  isRead: false,
})
</script>


<template>
  <div class="container">
    <a-form :model="form" size="large" class="table">
      <a-link href="/user/login" class="login">登录</a-link>
      <a-form-item field="account" label="账号" validate-trigger="input" required>
        <a-input v-model="form.account" placeholder="请输入账号" />
      </a-form-item>

      <a-form-item field="nickname" label="昵称" validate-trigger="input" required>
        <a-input v-model="form.nickname" placeholder="请输入昵称" />
      </a-form-item>

      <a-form-item field="email" label="邮箱" validate-trigger="input" required>
        <a-input v-model="form.email" placeholder="请输入电子邮箱" />
      </a-form-item>

      <a-form-item field="phone" label="电话" allow-clear validate-trigger="input" required>
        <a-input v-model="form.phone" placeholder="请输入电话">
          <template #prepend>
            +86
          </template>
        </a-input>

      </a-form-item>

      <a-form-item field="password" label="密码" validate-trigger="input" required>
        <a-input-password v-model="form.password" placeholder="请设置密码" />
      </a-form-item>

      <a-form-item field="repassword" label="确认密码" validate-trigger="input" required>
        <a-input-password v-model="form.repassword" placeholder="请确认密码" />
      </a-form-item>


      <a-form-item field="isRead" class="isread">
        <a-checkbox v-model="form.isRead">
          我已阅读协议
        </a-checkbox>
      </a-form-item>
      <a-button type="primary" class="register">注册</a-button>
    </a-form>
  </div>
</template>




<style scoped lang="less" >
.container {
  width: 100%;
  height: 100vh;
  margin: 0;
  display: flex;
  background-image: linear-gradient(to right, #a8c0ff, #3f2b96) !important;

  .table {
    position: relative;
    max-width: 600px;
    min-width: 400px;
    height: 85%;
    display: flex;
    justify-content: space-evenly;
    margin: auto;
    background-color: #ffffffdc;
    align-items: center;
    padding: 5px 30px 0px 20px;
    // margin-top: 10px;
    :deep(.arco-form-item-label) {
      font-size: 16px;
    }
  }
  .register {
    font-size: 18px;
    width: 50%;
    max-width: 600px;
    min-width: 300px
  }
  .isread {
    margin-top: -40px;
  }
}

.login {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #3d2dc6;
  font-size: 12px;
  
}
</style>